@import "./base.less";

@upload-padding-vertical: @padding-vertical/1.6;
@upload-picture-width: 120px;

.loop(@counter: 0) when (@counter < 100) {
  .loop((@counter + 1));
  &.percent-@{counter}:after {
    width: (1% * @counter);
  }
}

.@{css-prefix}.upload {
  font-size: @base-font-size;
  color: @base-font-color;

  .upload-select {
    input {
      display: none;
    }
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    // margin-top: @upload-padding-vertical;

    li {
      padding: @upload-padding-vertical @padding-horizontal/2;
      transition: background-color .2s ease-in-out;
      overflow: hidden;
      position: relative;
      line-height: 1em;

      &:hover {
        background: @hover-background-color;

        .close {
          opacity: 1;
        }
      }

      &.progress {

        &:before, &:after {
          position: absolute;
          left: 0;
          bottom: 0;
          display: block;
          content: '';
          height: 2px;
          width: 100%;
        }

        &:before {
          background: @border-color;
        }
        &:after {
          background: #00a854;
          width: 1%;
        }

        &.percent-80:after {
          width: 80%;
        }

        .loop(0);

      }

      &.error {
        color: @error-color;
      }

      .close {
        position: absolute;
        right: 1em;
        top: @upload-padding-vertical;
        font-weight: bold;
        opacity: 0;
        cursor: pointer;
      }
    }
  }

  &.picture {
    .upload-select {
      height: @upload-picture-width;
      line-height: @upload-picture-width;
      width: @upload-picture-width;
      background: #fbfbfb;
      .transition(border-color .3s ease);
      display: inline-block;
      text-align: center;
      cursor: pointer;
      border: 2px dashed @border-color;
      position: relative;

      &:hover {
        border-color: @active-color;
      }

      i {
        font-weight: bold;
        font-size: 3em;
        color: #999;
      }
    }

    ul {
      display: inline-block;
      margin: 0;
      vertical-align: top;

      li {
        height: @upload-picture-width;
        line-height: @upload-picture-width;
        width: @upload-picture-width;
        display: inline-block;
        text-align: center;
        border-radius: 2px;
        margin: 0 8px 8px 0;
        padding: 0;
        box-shadow: 0 1px 6px rgba(0,0,0,.2);
        //.transition(all .5s cubic-bezier(.55,0,.1,1));

        &:hover {
          .info {
            opacity: 1;
          }
        }

        &.progress {

          &:before, &:after {
            height: 5px;
            z-index: -1;
          }
        }

        .info {
          position: absolute;
          top: 0;
          left: 0;
          width: @upload-picture-width;
          height: @upload-picture-width;
          opacity: 0;
          background: rgba(0, 0, 0, .6);
          color: #fff;
          border-radius: 2px;
          cursor: pointer;

          i {
            font-size: 1.6em;
            font-weight: bold;
          }
        }

        img {
          border-radius: 2px;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
